<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500">你的浏览器不支持canvas</canvas>
	<script type="text/javascript">
		//得到标签
		var canvas = document.getElementById("canvas");
		//上下文
		var ctx = canvas.getContext("2d");
		
		var x = 100;
		setInterval(function(){
			//x自增
			x++;
			//清除整个画布
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			//创建一个图片对象
			ctx.beginPath();
			//绘制弧形
			ctx.arc(x,200,50,0,Math.PI*2,true);
			//填充
			ctx.fillStyle = "navy";
			ctx.fill();
			//封闭线段
			ctx.closePath();
		},20);
	</script>
</body>
</html>